<!--
 * @Description: 事件流
 * @Author: zzj
 * @Date: 2021-09-14 11:02:44
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-14 12:01:35
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件流</title>
    <style>
        #a1{
            width: 300px;
            height: 300px;
            background-color: dodgerblue;
        }
        #a2{
            width: 150px;
            height: 150px;
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <ul id="myul">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>
    <div id="a1">
        <div id="a2"></div>
    </div>
    <button onclick="test()">按钮一</button>
    <button id="btn2">按钮二</button>
    <script>
        var ul = document.getElementById("myul")
        var lis = document.getElementsByTagName("li");
        var lis_length = lis.length;
        // for(var i=0;i<lis_length;i++){
        //     lis[i].onclick = function(e){
        //         // this.style.backgroundColor = "yellow";  //参数没有e
        //         e.target.style.backgroundColor = "red";  //只支持原有元素
        //     }
        // }
        ul.onclick = function(e){
            //this.style.backgroundColor = "yellow";  //此时this指向整个ul 
            e.target.style.backgroundColor = "red";
            e.preventDefault();  //取消事件的默认行为
            e.stopPropagation();  //阻止事件传播
            console.log(e.bubbles); //是否冒泡
            console.log(e.cancelable); //是否取消事件的默认行为
            console.log(e.currentTarget); //绑定事件的哪个元素
            console.log(e.eventPhase); //事件的阶段
            console.log(e.target); //实际触发事件的元素
            console.log(e.type);//事件的类型
        }
        var t = document.createTextNode("zzj");
        var li = document.createElement("li");
        li.appendChild(t);
        ul.appendChild(li);

        function test(){
            console.log("btn1");
        }
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            console.log("btn2");
        }
        var a1 = document.getElementById("a1");
        var a2 = document.getElementById("a2");
        a1.addEventListener("click",function(){  //事件监听机制  事件监听器前不要加on  “onclick”：×
            console.log(111);
        },true) //true在捕获阶段调用事件处理程序；false在冒泡阶段调用【默认】
        a2.addEventListener("click",function(){  
            console.log(222);
        },true) 
        
        // a1.f2(){
        //     console.log(1112);
        // };
        // a1.addEventListener("click",f2,false);  //事件绑定
        // a1.removeAttribute("click",f2,false);  //解绑
        // a1.onclick = function(){
        //     console.log(111);
        //     f1();
        //     f2();
        // }
        // // a1.onclick = function(){
        // //     console.log("111");
        // // }
        // function f1(){};
        // function f2(){};
        // a2.onclick = function(){
        //     console.log("222");
        // }     
        
    </script>
</body>
</html>